<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="/QueenRestaurantWeb/resources/css/jquery-ui.css">
<script type="text/javascript"
	src="/QueenRestaurantWeb/resources/js/jquery-ui-1.10.3.custom.js"></script>
</head>
<body>
<script type="text/javascript">
var tables;
$(function(){

$(document).ready(getTableList());
	//$("#create_table").dialog();
	//新增餐桌窗口
$( "#create_table" ).dialog({
 	position:{ my: "center", at: "center", of: window },
	autoOpen: false,
	height: 300,
	width: 350,
	modal: true,
	buttons: {
		"确定": function() {
			var bValid = true;
			if ( bValid ) {
			var table = new Object();
			table.tableName = $("#tableName").val();
			table.seatNum = $("#seatNum").val();
			table.isRoom = $("#isRoom").val();
			create_table(table);
			}
		},
		"取消": function() {
			$( this ).dialog( "close" );
		}
	},
	close: function() {
		allFields.val( "" ).removeClass( "ui-state-error" );
	}
});
//点击新增按钮弹出新增餐桌窗口
$( "#create_new" )
	.click(function() {
		$( "#create_table" ).dialog( "open" );
});	
//创建餐桌
function create_table(table){
	$.ajax({
		type:'POST',
		contentType:'application/json',
		url:"/QueenRestaurantWeb/restaurant/table/create",
		data:JSON.stringify(table),
		success: function (data){
			show_table(data);
			$("#create_table").dialog( "close" );
		},
		error:function(){
			alert("error");
		}
	});
}
//获取餐桌列表
function getTableList(){
	$.get("/QueenRestaurantWeb/restaurant/table/list",function(data){
		show_table(data);
	});
}
});

//显示餐桌
function show_table(data){
	alert("show_table");
	tables = data;
	$("#tables tbody").empty();
	$.each(data,function(index, table){
		$("#tables tbody").append(
		"<tr>"
		+ "<td>" + table.tableName + "</td>"
		+ "<td>" + table.seatNum + "</td>"
		+ "<td>" + table.isRoom + "</td>"
		+ "<td>" + table.tableStatus + "</td>"
		+ "<td><input type='button' value='删除' onclick='delete_table("+table.id+")'/></td>"
		+ "</tr>");
	});
}
//删除餐桌
function delete_table(id){
alert("delete_table");
	var tableId = String(id);
	$.post("/QueenRestaurantWeb/restaurant/table/delete",
		tableId,function(data){
		show_table(data);
	});
}

</script>
<div id="restaurant_tables_div" align="center">
<div id="create_table" title="新增餐桌" >
	<table align="center">
		<tr>
			<td>餐桌名称：</td>
			<td><input id="tableName"/></td>
		</tr>
		<tr>
			<td>座位数：</td>
			<td><input id="seatNum"/></td>
		</tr>
		<tr>
			<td>是否为包间：</td>
			<td><input id="isRoom"/></td>
		</tr>
	</table>
</div>
<table id="tables">
	<thead>
		<tr>
			<th>餐桌名称</th>
			<th>座位数</th>
			<th>是否为包间</th>
			<th>状态</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table> 
<input id="create_new" type="button" value="新建"/>
<input type="button" value="修改"/>
</div>
</body>
</html>
